<template>
	<view class="apps">
		<view class="flex zindex-1 fdc">
			<video :src="mp4" object-fit="cover" :autoplay="true" :controls="false" :muted="true" :loop="true" id="videRef" class="video"></video>
			<view class="flex bgblue pt20 pb10 white aic jcc f16r">
				<text>fu wu min qi liu zhao xing dong fu wu min qi liu zhao xing dong fu wu min qi liu zhao xing dong fu wu min qi liu zhao xing dong</text>
			</view>
			<view class="flex bgblue white aic jcc f26" style="border-top:1rpx solid #fff; border-bottom: 1rpx solid #fff;">
				<text style="padding:8rpx 0;">服务民企 “六找行动”</text>
			</view>
			<view class="flex bgblue pt10 white f16r jcc aic">
				<text>fu wu min qi liu zhao xing dong fu wu min qi liu zhao xing dong fu wu min qi liu zhao xing dong fu wu min qi liu zhao xing dong</text>
			</view>
			<view class="flex bgblue ptb20"></view>
		</view>
		<view class="flex fdc pt30 home" :style="{top:homeTop+'px'}">
			<view class="more">
				<view class="bag flex jcc aic" @click="switchHomeTop">
					<view :class="switchHome == 'arrow-up' ? `` :`deg180`">
					<image :src="arrow_up" style="width:26rpx;height:26rpx;z-index: 1000;" class="uptransform"></image>
					</view>
				</view>
			</view>
			<view class="ptb30 flex jcc aic">
				<image :src="top" style="width: 600rpx; height: 182rpx;"></image>
			</view>
			<view class="ptb30 flex plr30 aic jcsb">
				<text class="white bgblue plr15 ptb10 f32 fweight4">与政府同步</text>
				<text class="white bgblue plr15 ptb10 f32 fweight4">与企业同心</text>
				<text class="white bgblue plr15 ptb10 f32 fweight4">与发展同行</text>
			</view>
			<view class="ptb30 flex plr15 aic jcsb">
				<image :src="news" style="width: 720rpx; height: 360rpx;"></image>
			</view>
			<view class="ptb20 flex aic jcc">
				<text class="blue f32 fweight6">@ 民营企业交流服务平台</text>
			</view>
			<view class="ptb10 flex">
				<uv-grid :border="false">
					<uv-grid-item>
						<view class="flex fdc aic ptb10 plr20 bgwhite br15 mb20" @click="handle('notice',false)">
							<uv-icon size="40" name="https://wework.sdlycwzx.com/static/images/2.jpg" ></uv-icon>
							<text class="f28 mt10 black">通知公告</text>
						</view>
					</uv-grid-item>
					
					<uv-grid-item>
						<view class="flex fdc aic ptb10 plr20 bgwhite br15 mb20" @click="handle('service',true)">
							<uv-icon size="40" name="https://wework.sdlycwzx.com/static/images/1.jpg" ></uv-icon>
							<text class="f28 mt10 black">企服对接</text>
						</view>
					</uv-grid-item>
					<uv-grid-item>
						<view class="flex fdc aic ptb10 plr20 bgwhite br15 mb20" @click="handle('apply',false)">
							<uv-icon size="40" name="https://wework.sdlycwzx.com/static/images/7.jpg"></uv-icon>
							<text class="f28 mt10 black">供需对接</text>
						</view>
					</uv-grid-item>
					<uv-grid-item>
						<view class="flex fdc aic ptb10 plr20 bgwhite br15 mb20" @click="handle('special',true)">
							<uv-icon size="40" name="https://wework.sdlycwzx.com/static/images/3.jpg" ></uv-icon>
							<text class="f28 mt10 black">主题活动</text>
						</view>
					</uv-grid-item>
					
					<uv-grid-item>
						<view class="flex fdc aic ptb10 plr20 bgwhite br15 mb20"  @click="handle('media',true)">
							<uv-icon size="40" name="https://wework.sdlycwzx.com/static/images/5.png" ></uv-icon>
							<text class="f28 mt10 black">企业学堂</text>
						</view>
					</uv-grid-item>
					<uv-grid-item>
						<view class="flex fdc aic ptb10 plr20 bgwhite br15 mb20" @click="handle('enterprise',false)">
							<uv-icon size="40" name="https://wework.sdlycwzx.com/static/images/4.png" ></uv-icon>
							<text class="f28 mt10 black">企业风采</text>
						</view>
					</uv-grid-item>
					<uv-grid-item>
						<view class="flex fdc aic ptb10 plr20 bgwhite br15 mb20" @click="handle('apply',false)">
							<uv-icon size="40" name="https://wework.sdlycwzx.com/static/images/8.jpg"></uv-icon>
							<text class="f28 mt10 black">科创广场</text>
						</view>
					</uv-grid-item>
					<uv-grid-item>
						<view class="flex fdc aic ptb10 plr20 bgwhite br15 mb20" @click="handle('apply',false)">
							<uv-icon size="40" name="https://wework.sdlycwzx.com/static/images/10.png"></uv-icon>
							<text class="f28 mt10 black">民间投资</text>
						</view>
					</uv-grid-item>
					<uv-grid-item>
						<view class="flex fdc aic ptb10 plr20 bgwhite br15 mb20" @click="handle('apply',false)">
							<uv-icon size="40" name="https://wework.sdlycwzx.com/static/images/9.jpg"></uv-icon>
							<text class="f28 mt10 black">诉求服务</text>
						</view>
					</uv-grid-item>
				</uv-grid>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { util } from '/common/util.js';
	import { ref , reactive,nextTick  } from 'vue';
	import { onLoad,onShow } from '@dcloudio/uni-app'
	console.log(111);
	//数据
	const switchHome = ref('arrow-up'),
		  homeTop = ref(300),
		  pageUrl = ref(''),
		  systemType = ref(''),
		  arrow_up = ref('https://wework.sdlycwzx.com/static/images/arrow_up.png'),
		  mp4 = ref('https://wework.sdlycwzx.com/static/images/bg.mp4'),
		  top = ref('https://wework.sdlycwzx.com/static/images/toplogo.png'),
		  news = ref('https://wework.sdlycwzx.com/static/images/new.png')
	//方法
	const switchHomeTop = ()=>{
			if(switchHome.value == 'arrow-up'){
				homeTop.value = 100, switchHome.value = 'arrow-down'
			}else{
				homeTop.value = 300, switchHome.value = 'arrow-up'
			}
		}, handle = (urlType,isCha=true) => {
			
			
			pageUrl.value = '/pages/'+urlType+'/'+urlType;
			
			uni.navigateTo({
				url:pageUrl.value,
			})
		}
	
	onLoad(()=>{
		console.log('2222');
		console.log(util.getSystem());
	})
	onShow(()=>{
		nextTick().then(()=>{
			uni.createVideoContext('videoRef').play();
		})
	})
		
</script>
<style scoped lang="scss">
	.apps{background-color: #dbedff !important;}
	.video{width: 100% !important;}
	.zindex-1{z-index: 5;}
	.zindex-2{z-index: 10;}
	.f16r{font-size: 14rpx; white-space: nowrap;}
	.bgblue{background-color: #008df2;}
	.home{
		position: absolute; width:100%;border-radius: 20rpx 20rpx 0 0; background-color: #dbedff; min-height: 840rpx;box-sizing: border-box;
		transition-duration:1s; transition-timing-function:ease;
		.more{ position: absolute; right:20rpx; top:-80rpx;
			.bag{width: 100rpx;position: relative;height: 90rpx; padding-top: 10rpx;}
			.bag::before{
				  content: '';
				    position: absolute;
				    top: -20rpx;
				    left: 0;
				    right: 0;
				    bottom: 0;
				    background: #dbedff;
				    transform: perspective(40rpx) rotateX(15deg);
				    transform-origin: bottom;
			}
		}
	}
	.deg180{
		transform: rotate(180deg);
	}
	.uptransform{
		animation: topTransform 2s linear infinite;
	}
	@keyframes topTransform {
		0% {
			transform: translateY(0rpx);
			opacity:1;
		}
		25% {
			transform: translateY(8rpx);
			opacity:0.5;
		}
		50%{
			transform: translateY(15rpx);
			opacity:0;
		}
		75%{
			transform: translateY(8rpx);
			opacity:0.5;
		}
		100%{
			transform: translateY(0rpx);
			opacity:1;
		}
	}


</style>
